<template>
  <view class="page">
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="list" @scroll="scroll">
      <view class="__margin-top"></view>
      <view class="drag-sort-wrap">
        <dragSort :list="rooms" :disabled="false" @childClick="clicklistitem1">
          <template v-slot="{ item }">
            <view class="item">
              <view class="content">
                <text class="name">{{ item.name_room }}</text>
                <text class="describe">{{ item.equip_total }}个设备</text>
              </view>
              <view class="touch-tight">
                <uni-icons type="right" size="30rpx"></uni-icons>
              </view>
            </view>
          </template>
        </dragSort>
      </view>
      <view class="__margin-top"></view>
    </scroll-view>
    <view v-show="showDeleteDialog" class="delete-dialog">
      <view class="dialog-content">
        <text>确定移动吗？</text>
        <view class="btn-group">
          <button @click="moveequip()">确定</button>
          <button @click="showDeleteDialog = false">取消</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex';
import SeniorTable from '@/components/data-table/senior-table.vue'

//获取用户所有房间列表接口
import {_getrooms} from '@/service/room.js'
import {_moveequip} from '@/service/equip.js'
import dragSort from "@/components/boom-drag-sort/index.vue";


export default {
  components: {
    dragSort,
    SeniorTable
  },
  data() {
    return {
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      serialnum_room: '',
      serialnum_equip: '',
      isEdit: false,
      nickname: '',
      account_user: '',
      password_user: '',
      rooms: [],
      equips: '',
      showDeleteDialog: false,
    };
  },
  onLoad(options) {
    let newdata;
    try {
      const value = uni.getStorageSync('userInfo');
      if (value != null) {
        this.nickname = value.nickname;
        this.account_user = value.accountNum;
        this.password_user = value.password;
      }
    } catch (e) {
      console.error(e);
    }

    if (options.serialnum_equip) {
      this.serialnum_equip = options.serialnum_equip;
      console.log(this.serialnum_equip)
    }
  },
  onShow() {
    this.getrooms();
    // console.log('asdgashj')
  },
  methods: {
    scroll(e) {
      // console.log(e)
      this.old.scrollTop = e.detail.scrollTop
    },
    async getrooms() {
      let data = {
        account_user: this.account_user
      }
      let res = await _getrooms(data);
      this.rooms = res.data;
      console.log(this.rooms);

    },

    clicklistitem1(item) {
      this.serialnum_room = item.serialnum_room;
      console.log(this.serialnum_room)
      this.showDeleteDialog = true;
    },
    async moveequip() {

      let res = await _moveequip({
        cbindinguseraccount_equip: this.account_user,
        serialnum_equip: this.serialnum_equip,
        serialnum_room: this.serialnum_room
      });
      if (res.flag) {
        uni.navigateBack();
      } else {
        setTimeout(() => {
          uni.hideLoading();
          this.$api.msg(data.message);
        }, 200);
      }
      this.showDeleteDialog = false;
    },
    // updateComponent() {
    // 	this.rooms = this.rooms.filter(item => item.serialnum !== this.serialnum_room); // 过滤掉被删除的房间信息
    // 	this.$forceUpdate(); // 强制更新页面
    // }
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: #e5e5e569;

  .list {
    //#ifdef APP-PLUS
    height: 100vh;
    //#endif
    //#ifdef H5
    height: calc(100vh - 44px);
    //#endif
  }
}

.__margin-top {
  height: 30rpx;
}

.drag-sort-wrap {
  box-sizing: border-box;
  padding: 0 30rpx;
}

.item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: rgba(255, 255, 255, 0); // 设置背景色

  .icon {
    margin-right: 20rpx;
  }

  .touch-tight {
    width: 24px;
    height: 24px;
    margin-left: auto;
  }

  .content {
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;

    .name {
      font-size: 34rpx;
    }

    .describe {
      font-size: 25rpx;
      color: #808080;
    }
  }
}

.delete-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background-color: white;
  padding: 40rpx;
  border-radius: 20rpx;
  width: 600rpx;
  text-align: center;
}

.dialog-content text {
  font-size: 32rpx;
  margin-bottom: 20rpx;
  color: #333;
}

.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.btn-group button {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 30rpx;
  margin: 0 20rpx;
  
  &.cancel {
    background: #F5F5F5;
    color: #666;
  }
  
  &.confirm {
    background: #138f87;
    color: #FFFFFF;
    
    &:active {
      background: #44cdbd;
    }
  }
}
</style>